<template>
  <div>
    <div class="headf">
      <span @click="$router.go(-1)"></span>
      <div class="wenebn">
        <h6>{{ name }}</h6>
        <p class="">{{ nowPrice }}</p>
        <!-- <p class="">{{ currentItem.p }} {{ currentItem.zdp ? currentItem.zdp.toFixed(2) + '%' : '0.00%' }}</p> -->
      </div>
    </div>
    <div style="height:1.5rem"></div>
    <div class="goumais">
      <div class="xiaoge">
        <span
          ><img
            src=""
          />数量</span
        >
        <div class="rtyh">
          <div class="kunk">
            <input
              placeholder="请输入"
              v-model="buyNum"
              @input="buyNum = buyNum.replace(/^(0+)|[^\d]+/g, '')"
              type="number"
            /><a class="shou">手</a>
          </div>
        </div>
      </div>
      <p class="shougu">1手=100股</p>
      <div class="xiaoge">
        <span class="eduleft"
          ><img
            class="eduleftimg"
            src=""
          />可用额度</span
        >
        <div class="eduright">
          <a class="ertyu">￥{{ userinfo.enableAmt }}</a>
        </div>
      </div>
      <div class="rtyh">
        <!-- <div class="fangxi">
                    <a class="fanh" :class="buyType == 0 ? 'xuk' : ''" @click="buyType = 0">买涨</a>
                    <a class="fanh" :class="buyType == 1 ? 'xuk' : ''" @click="buyType = 1">买跌</a>
                </div> -->
      </div>
      <div class="xiaoge">
        <span class="eduleft"
          ><img
            src=""
          />选择杠杆倍数</span
        >
        <div class="rtyh" @click="showPicker = true">
          <div class="kunk">
            <input
              placeholder="请选择"
              disabled="disabled"
              v-model="lever"
              class="canwei"
            />
            <img
              class="gangganicon"
              src=""
            />
          </div>
        </div>
      </div>
      <div class="xiaoge">
        <span class="eduleft"
          ><img
            src=""
          />支付保证金</span
        >
        <div class="eduright">
          <a class="ertyu">
            ￥{{ ((nowPrice * buyNum * 100) / lever).toFixed(2) }}</a
          >
        </div>
      </div>
      <!-- <div class="xiaoge">
                <span class="eduleft"><img
                        src="">手续费</span>
                <div class="eduright"><a class="ertyu">￥26600640.90</a></div>
            </div> -->
    </div>
    <div class="mail" @click="setBuy">买入</div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        :columns="siteLeverList"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        show-toolbar
      />
    </van-popup>
  </div>
</template>
<script>
import * as api from "@/axios/api";
import { Toast } from "vant";
export default {
  components: {},
  props: {},
  data() {
    return {
      showPicker: false,
      currentItem: "",
      userinfo: "",
      settingdetail: "",
      siteLeverList: [],
      nowPrice: 0,
      buyType: 0, // 0 买入 1 卖出
      buyNum: "", //买入数量
      lever: "", //杠杆倍数
      name: "",
      code: "",
      id: "",
      buying: false
    };
  },
  mounted() {
    if (this.$route.query.code) {
      this.code = this.$route.query.code;
    }
    if (this.$route.query.name) {
      this.name = this.$route.query.name;
    }
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    }
    if (this.$route.query.m) {
      this.nowPrice = Number(this.$route.query.m);
    }
    // this.currentItem = JSON.parse(decodeURIComponent(this.$route.query.item))

    this.getUserInfo();
    this.getuserSetting();
  },
  methods: {
    onConfirm(item) {
      console.log(item);
      this.showPicker = false;
      this.lever = item.value;
    },
    async getuserSetting() {
      var opt = {};
      var data = await api.getSetting(opt);
      this.settingdetail = data.data;
      this.siteLever = this.settingdetail.siteLever.split("/");
      this.lever = this.siteLever[0];
      this.siteLeverList = [];
      for (let i = 0; i < this.siteLever.length; i++) {
        let val = this.siteLever[i];
        let item = {
          text: val + "倍",
          value: val
        };
        this.siteLeverList.push(item);
      }
      this.buyNum = this.settingdetail.buyMinNum / 100;
    },
    async getbuyVipQc() {
      if (this.buyNum * 100 < this.settingdetail.buyMinNum) {
        this.$message.error(
          "交易数量不能小于" + this.settingdetail.buyMinNum / 100 + "手"
        );
        return;
      }
      if (this.buyNum * 100 > this.settingdetail.buyMaxNum) {
        this.$message.error(
          "交易数量不能大于" + this.settingdetail.buyMaxNum / 100 + "手"
        );
        return;
      }
      var opt = {
        buyNum: this.buyNum * 100,
        stockCode: this.currentItem.c,
        lever: 1,
        buyType: this.buyType
      };
      var data = await api.buyVipQc(opt);
      if (data.status == 0) {
        this.$toast("下单成功");
      } else {
        this.$toast(data.msg);
      }
    },
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        this.userinfo = data.data;
      }
    },
    //买卖
    setBuy() {
      console.log(this.userinfo);
      if (!this.userinfo.idCard) {
        Toast(this.$t("hj111"));
        this.$router.push("/smrz");
        return;
      }
      if (this.buyNum * 100 < this.settingdetail.buyMinNum) {
        this.$message.error(
          "交易数量不能小于" + this.settingdetail.buyMinNum / 100 + "手"
        );
        return;
      }
      if (this.buyNum * 100 > this.settingdetail.buyMaxNum) {
        this.$message.error(
          "交易数量不能大于" + this.settingdetail.buyMaxNum / 100 + "手"
        );
        return;
      }
      // if (!this.agree) {
      //   Toast('需同意合作协议才能交易!')
      // } else if (isNull(this.selectNumber) && isNull(this.autoNumber)) {
      //   Toast('请选择购买手数')
      // } else if (isNull(this.selectType)) {
      //   Toast('请选择买卖方向')
      // } else if(isNull(this.subaccountNumber)) {
      //   Toast('请选择子账户')
      // } else {}
      if (this.buying) {
        return;
      }
      this.buying = true;
      let opts = {};
      opts = {
        // stockId: this.detail.id,
        // buyNum: this.selectNumber ? this.selectNumber * 100 : 0, // 单位为手
        // buyType: this.selectType,
        // lever: this.selectCycle ? this.selectCycle : 0,
        // subaccountNumber:this.subaccountNumber
        //买入是买涨buyType:0, 卖出是买跌buyType:1,卖出的状态是0，买入的状态是1
        buyNum: Number(this.buyNum) * 100, // 单位为手
        //buyNum: (this.num.match(/\d+/g))[0] * 100, // 单位为手
        lever: this.lever,
        buyType: 0,
        stockId: this.id
      };
      this.gpBuy(opts);
    },
    //股票买入
    async gpBuy(opts) {
      console.log(11);
      opts.stockId = this.id;
      let data = await api.buy(opts);
      this.buying = false;
      console.log(data);
      if (data.status === 0) {
        Toast(data.data);
        this.getUserInfo();
        this.$router.push("/warehouse");
      } else {
        if (data.msg.indexOf("不在交易时段内") > -1) {
          Toast(this.$t("hj113"));
        } else {
          Toast(data.msg);
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .van-picker__cancel {
  font-size: 0.4rem;
}
/deep/ .van-picker__confirm {
  font-size: 0.4rem;
}
/deep/ .van-picker__toolbar {
  height: 1.3rem;
}
/deep/ .van-picker-column {
  font-size: 0.4rem;
}
.headf {
  height: 1.17rem;
  position: fixed;
  background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(241, 22, 20));
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #ececec;
  z-index: 33;

  span {
    position: absolute;
    width: 0.266rem;
    height: 0.45rem;
    background: url()
      no-repeat 50%;
    background-size: 100%;
    left: 0.4rem;
    top: 0.37rem;
  }

  .wenebn {
    text-align: center;
    width: 8rem;
    margin: 0 auto;

    h6 {
      color: #fff;
      font-size: 0.4rem;
      padding-top: 0.133rem;
      font-weight: 500;
    }

    p {
      font-size: 0.32rem;
      color: #fff;
      margin-top: 0.133rem;
    }
  }
}

.goumais {
  width: 9.21rem;
  margin: 0 auto;

  .xiaoge {
    margin-top: 10px;
    display: flex;
    height: 1.5rem;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;

    span {
      display: flex;
      align-items: center;
      color: #333;
      font-size: 0.43rem;
      line-height: 1.5rem;

      img {
        width: 0.43rem;
        height: 0.43rem;
        margin-right: 0.133rem;
      }
    }

    .rtyh {
      background-color: rgb(245, 245, 245);
      width: 4.75rem;
      border: 1px solid rgb(224, 224, 224);
      border-radius: 5px;
      display: flex;

      .kunk {
        border-radius: 0.08rem;
        display: flex;
        align-items: center;

        input {
          color: #000;
          font-size: 0.37rem;
          background-color: rgb(245, 245, 245);
          width: 4rem;
          padding-left: 10px;
          height: 1.07rem !important;
        }

        a {
          color: #333;
          font-size: 0.4rem;
          line-height: 1.07rem;
          margin-right: 0.266rem;
        }

        .gangganicon {
          width: 0.26rem;
          height: 0.24rem;
        }
      }
    }

    .eduleft {
      display: flex;
      align-items: center;

      .eduleftimg {
        width: 0.43rem;
        height: 0.43rem;
        margin-right: 0.13rem;
      }
    }

    .eduright {
      justify-content: space-between;
    }

    .ertyu {
      color: #333;
      font-size: 0.4rem;
      line-height: 1.5rem;
    }
  }

  .fangxi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.4rem;
    text-align: center;
    margin-top: 20px;

    .fanh {
      width: 49%;
      height: 1.07rem;
      line-height: 1.07rem;
      border-radius: 5px;
      color: #999;
      border: 1px solid #e0e0e0;
    }

    .xuk {
      color: #fff;
      background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(241, 22, 20));
      border: 1px solid #fff;
    }
  }
}

.shougu {
  color: rgb(153, 153, 153);
  text-align: right;
}

.mail {
  width: 9.21rem;
  height: 1.2rem;
  border-radius: 0.13rem;
  line-height: 1.2rem;
  margin: 0.8rem auto;
  color: #fff;
  font-size: 0.43rem;
  text-align: center;
  background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(241, 22, 20));
}
</style>
